<template>
  <v-app>
    <Rain />
    <v-container
      class="back-side left"
    >
    </v-container>
    <v-container
      class="back-side right-up"
    >
    </v-container>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import Rain from './components/rain/RainBack'
export default {
  name: 'App',

  data: () => ({
    //
  }),
  components: {
    Rain
  }
}
</script>

<style lang="scss" scoped>
.back-side {
  height: 60%;
  position: fixed;
}
.left {
  margin-top: 30%;
  width: 40%;
  background-image: url("../static/img/UI/BSLeftDown.png");
  background-size: 100% 100%;
  animation: fadeInLeft;
  animation-duration: 2s;
}
.right-up {
  margin-top: 10%;
  margin-left: 80%;
  width: 20%;
  height: 30%;
  background-image: url("../static/img/UI/BSRightUp.png");
  background-size: 100% 100%;
  animation: fadeInRight;
  animation-duration: 2s;
}
</style>
